<template>
    <div class="back">
        
    <video autoplay loop muted>
        <source src="../../assets/img/back.mp4" type="video/mp4"  />
    </video>
        
        <div class="container">
            <div class="avatar">
                <img src="../../assets/img/avatar.jpg" alt="">
            </div>
            <div class="box login_from">
                <!-- 登录表单 -->
                <el-form  :model="loginFrom" :rules="loginFormRules" ref="loginFromRef" label-width="0px" class="login_form">
                
                    <!-- 用户名 -->
                    <el-form-item prop="username">
                        <el-input v-model="loginFrom.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
                    </el-form-item>

                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input v-model="loginFrom.password" show-password placeholder="请输入密码" prefix-icon="el-icon-lock" type="password"></el-input>
                    </el-form-item>

                    <!-- 登录按钮 -->
                    <el-form-item class="btns">
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button >注册</el-button>
                    </el-form-item>
                </el-form>  

            </div>
        </div>
    </div>
    
</template>

<script>
export default {
    data () {
        return {
            loginFrom: {
                username: '',
                password: ''
            },
            loginFormRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
                ]
            }
           
        }
    },
    methods: {  
      
        deepCopy(obj) {
            var newObj;
            if(typeof obj === 'object'){
                // newObj = obj.constructor === Array ? [] : {};
                console.log(obj)
                for(var key in obj){
                    if(typeof obj[key] === 'object'){
                        newObj[key] = deepCopy(obj[key]);
                    }else{
                        newObj[key] = obj[key];
                    }
                }
            }else{
                newObj = obj;
            }
            console.log(newObj)
            return newObj;
        },


        login () {
            // let obj ={
            //     name:"asdjfklajsl"
            // }
            // this.deepCopy(obj)

            this.$refs.loginFromRef.validate(async valid => {
                const that = this;
                if (!valid) {
                    return false;
                } 
                that.$http.post('admin/login', this.loginFrom).then(function (res) {
                    // console.log(res)
                    if (res.data.code !== 200){
                        that.$message({
                            message: res.data.msg,
                            type: 'error'
                        });
                        return false;
                    }
                    that.$message({
                        message: res.data.msg,
                        type: 'success'
                    })
                    //保存token，用于验证登录
                    window.sessionStorage.setItem('token',res.data.token);
                    //保存用户信息
                    window.sessionStorage.setItem('userInfo',JSON.stringify(res.data.data))
                    that.$router.push('/');
                }).catch(function (error) {
                    // console.log(error)
                    that.$message({
                        message: error.data.msg || '登录失败',
                        type: 'error'
                    })
                })
            })
        }
    }

}
</script>

<style>
    .back{
        width: 100%;
        height: 100%;
    }
    .back video{
        position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
    }
    source{  
        min-width: 100%;  
        min-height: 100%;  
        height: auto;  
        width: auto;  
    } 
    .container{
        width: 300px;
        height: 260px;
        background: #fff0;
        border-radius:3px;
        position: relative;
        left: 50%;
        top: 50%;
        transform : translate(-50%, -50%);
    }
    .container:hover{
        box-shadow: 0 0 10px #ddd;
    }
    .el-input__inner{
        background-color: #ffffff03;
        color: #fff;
    }
    .avatar{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        box-shadow: 0 0 10px #ddd;
        top: 0px;
        left: 50%;
        transform : translate(-50%, -50%);
        padding:5px;
        border:1px solid #ccc;
    }
    .avatar img{
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    .box{
        position:absolute;
        bottom: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }
    .box .btns {
        display: flex;
        justify-content: flex-end;
    }
</style>